<html>
<head>
	<title>批次任务阶段列表</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="../../static/bootstrap/js/jquery-3.4.1.min.js" type="text/javascript"></script>
	<script src="../../static/bootstrap/js/static-resources.js"></script>
</head>
<script type="text/javascript">
	$(function () {
		$(".footerPage").load("../footer.html");
		let DEFAULT_DATA_MODEL = {
			"stageId":"",
			"stageName":"",
			"batchId":"",
			"remark":"",
		};
		new Vue({
			el : '#app',
			mixins: [window.$DEFAULT_MIXIN],
			data: {
				queryParam: {
					"stageId":"",
					"batchId":"",
				},
				pageInfo: {
					page: 1,
					size: 10,
					total: 0
				},
				list:[],
				selected: null,

				show: false,
				readonly: false,
				loading: false,
				modelTitle:"",
				dataObj: {},
				opType: "",
			},
			watch:{
				opType(val, old){
					if (val == "add") {
						this.modelTitle = "批次任务阶段新增";
						this.show = true;
						this.readonly = false;
						this.dataObj = $.extend({}, DEFAULT_DATA_MODEL);
					} else if (val == "update") {
						this.modelTitle = "批次任务阶段修改";
						this.show = true;
						this.readonly = false;
						this.dataObj = $.extend({}, this.selected);
					} else if (val == "view") {
						this.modelTitle = "批次任务阶段详情";
						this.show = true;
						this.readonly = true;
						this.dataObj = $.extend({}, this.selected);
					}
				}
			},
			computed:{
				fields(){
					return [
						{key: 'stageId', label:'阶段编号', sortable: false},
						{key: 'stageName', label:'阶段名称', sortable: false},
						{key: 'batchId', label:'批次标识', sortable: false},
						{key: 'remark', label:'备注', sortable: false},
					]
				},
			},
			methods:{
				onRowSelected(items){
					this.selected = items[0];
				},
				submitQry(page){
					if (page == true) {
						this.pageInfo.page = 1;
					}
					let self = this;
					JLEUtil.requestForm("api/bat/batch/stage/configs", "POST", null, $.extend({}, self.queryParam, self.pageInfo),
							function(data, textStatus, jqXHR){
								self.list = data.rows;
								self.pageInfo.total = data.total;
							},
							function(jqXHR, textStatus, errorThrown){

							});
				},
				resetContent(){
					this.queryParam.stageId = "";
					this.queryParam.batchId = "";
				},
				toAddPage(){
					this.opType = "add";
				},
				toModifyRecord(){
					if (!this.selected) {
						this.$bvToast.toast(`请选择一行数据`, {
							title: '提示 ',
							toaster: 'b-toaster-top-center',
							solid: true
						});
						return;
					}
					this.opType = "update";
				},
				delRecord(){
					if (!this.selected) {
						this.$bvToast.toast(`请选择一行数据`, {
							title: '提示 ',
							toaster: 'b-toaster-top-center',
							solid: true
						});
						return;
					}
					let self = this;
					this.$bvModal.msgBoxConfirm(`你确定要删除这条记录?`, {
						title: '删除提示',
						size: 'sm',
						buttonSize: 'sm',
						okVariant: 'success',
						headerClass: 'p-2 border-bottom-0',
						footerClass: 'p-2 border-top-0',
						cancelTitle: "取消",
						okTitle: "确定",
						centered: true
					}).then(value => {
						if (!value) return;
						JLEUtil.request("api/bat/batch/stage/config", "DELETE", null, { paramCode : this.selected.paramCode},
								function(data, textStatus, jqXHR){
									self.$bvToast.toast(`记录删除成功！`, {
										title: '提示 ',
										toaster: 'b-toaster-top-center',
										solid: true
									});
									self.submitQry(true);
								},
								function(jqXHR, textStatus, errorThrown){

								});
					})
				},
				toViewPage(){
					if (!this.selected) {
						this.$bvToast.toast(`请选择一行数据`, {
							title: '提示 ',
							toaster: 'b-toaster-top-center',
							solid: true
						});
						return;
					}
					this.opType = "view";
				},
				saveInfo(){

					let requestOptions = {
						url : "api/bat/batch/stage/config",
						type : "POST",
						dataObj: this.dataObj,
						success: (data)=>{
							this.$bvToast.toast(data.message, {
								title: '提示 ',
								toaster: 'b-toaster-top-center',
								solid: true
							});
							this.loading = false;
							this.closeModel();
							this.submitQry();
						},
						error: (jqXHR, textStatus, errorThrown)=>{
							this.loading = false;
							this.$bvToast.toast("提交失败", {
								title: '提示 ',
								toaster: 'b-toaster-top-center',
								solid: true
							});
						}
					};
					if (this.opType == "add") {
						requestOptions.type = "POST";
					} else if (this.opType == "update") {
						requestOptions.type = "PUT";
					}

					this.loading = true;
					let self = this;
					this.$refs.form.validate().then(success => {
						if (!success) {
							this.loading = false;
							return;
						}
						JLEUtil.request(requestOptions.url, requestOptions.type, null,
								requestOptions.dataObj,
								requestOptions.success,
								requestOptions.error
						);
					});
				},
				closeModel(){
					this.show = false;
					this.modelData = {};
					this.opType = "";
				}
			},
			mounted(){
				this.submitQry(true);
			}
		})
	});

</script>
</head>
<body>
<div class="headerPage"></div>
<div id="app">
	<div class="container-fluid mt-3">
		<div class="row">
			<div class="col-sm-12 search-box">
				<form role="form" style="text-align: right" id="formData" class="row">
					<div class="form-group col-sm-4">
						<b-form-group label-cols="4" label-cols-lg="4" label="阶段编号" >
							<b-form-input  v-model="queryParam.stageId"></b-form-input>
						</b-form-group>
					</div>
					<div class="form-group col-sm-4">
						<b-form-group label-cols="4" label-cols-lg="4" label="批次标识" >
							<b-form-input  v-model="queryParam.batchId"></b-form-input>
						</b-form-group>
					</div>
					<div class="control-group col-sm-4">
						<div class="text-center">
							<b-button variant="primary" @click="submitQry(true)">&nbsp;&nbsp;查&nbsp;&nbsp;询&nbsp;&nbsp;</b-button>
							<b-button variant="secondary" @click="resetContent">&nbsp;&nbsp;重&nbsp;&nbsp;置&nbsp;&nbsp;</b-button>
						</div>
					</div>
				</form>
				<div class="row"></div>
				<!-- table -->
			</div>
			<div class="form-group col-sm-12 ">
				<div class="text-left">
					<b-button variant="primary" @click="toAddPage">&nbsp;&nbsp;新&nbsp;&nbsp;增&nbsp;&nbsp;</b-button>
					<b-button variant="primary" @click="toModifyRecord">&nbsp;&nbsp;修&nbsp;&nbsp;改&nbsp;&nbsp;</b-button>
					<b-button variant="primary" @click="delRecord">&nbsp;&nbsp;删&nbsp;&nbsp;除&nbsp;&nbsp;</b-button>
					<b-button variant="primary" @click="toViewPage">&nbsp;&nbsp;查&nbsp;&nbsp;看&nbsp;&nbsp;</b-button>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<!-- table start -->
		<b-table responsive hover selectable bordered fixed striped small
				 @row-selected="onRowSelected"
				 selected-variant="primary"
				 select-mode="single" :fields="fields" :items="list" >
			<template v-slot:table-colgroup="scope">
				<col
						v-for="field in scope.fields"
						:key="field.key"
						:style="{ width: '180px' }"
				>
			</template>
			<template v-slot:cell()="data" >
				<div class="text-truncate">{{ data.value }}</div>
			</template>
		</b-table>
		<div class="float-right">
			<b-pagination
					v-model="pageInfo.page"
					:total-rows="pageInfo.total"
					:per-page="pageInfo.size"
					@change="submitQry"
			></b-pagination>
		</div>
		<!-- table end -->
	</div>

	<b-modal  v-model="show" :title="modelTitle" size="xl"
			  scrollable
			  no-close-on-backdrop
			  hide-header-close
			  no-close-on-esc>
		<b-container fluid>
			<validation-observer ref="form">
				<form role="form" >
					<div class="row">
						<div class="col-sm-6">
							<validation-provider name="stageId" :rules="{ required: true }" v-slot="validationContext">
								<b-form-group label="阶段编号" label-cols-sm="4" label-align-sm="right">
									<b-form-input type="text" v-model="dataObj.stageId" 
												:readonly="opType != 'add' || readonly"
												:state="getValidationState(validationContext)"
												name="stageId" placeholder="阶段编号"></b-form-input>
									<b-form-invalid-feedback >阶段编号不能为空</b-form-invalid-feedback>
								</b-form-group>
							</validation-provider>
						</div>
						<div class="col-sm-6">
							<b-form-group label="阶段名称" label-cols-sm="4" label-align-sm="right">
								<b-form-input type="text" v-model="dataObj.stageName" name="stageName"  placeholder="阶段名称"  :readonly="readonly"></b-form-input>
							</b-form-group>
						</div>
						<div class="col-sm-6">
							<validation-provider name="batchId" :rules="{ required: true }" v-slot="validationContext">
								<b-form-group label="批次标识" label-cols-sm="4" label-align-sm="right">
									<b-form-input type="text" v-model="dataObj.batchId" 
												:readonly="opType != 'add' || readonly"
												:state="getValidationState(validationContext)"
												name="batchId" placeholder="批次标识"></b-form-input>
									<b-form-invalid-feedback >批次标识不能为空</b-form-invalid-feedback>
								</b-form-group>
							</validation-provider>
						</div>
						<div class="col-sm-6">
							<b-form-group label="备注" label-cols-sm="4" label-align-sm="right">
								<b-form-input type="text" v-model="dataObj.remark" name="remark"  placeholder="备注"  :readonly="readonly"></b-form-input>
							</b-form-group>
						</div>
					</div>
				</form>
			</validation-observer>
		</b-container>
		<template v-slot:modal-footer>
			<div class="control-group col-sm-12">
				<div class="text-center">
					<b-button variant="primary" @click="saveInfo" :disabled="loading">
						<div v-if="loading">
							<b-spinner small></b-spinner>
							保存中...
						</div>
						<span v-else="loading">保存</span>
					</b-button>
					<b-button variant="secondary" @click="closeModel" :disabled="loading">返回</b-button>
				</div>
			</div>
		</template>
	</b-modal>
</div>
<div class="footerPage"></div>
</body>
</html>